<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>404页面</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/o404.css">
</head>

<body>
    <div class="con_404">
        <div class="con_404_img">
            <img src="img/bird.png" alt="">
            <p class="word">哼! 这边是<strong> 404 </strong>哦 ,别点了,快走开!!!</p>
            <span>还有 <strong> 10s </strong> 返回首页</span>
        </div>
        <div class="con_404_right">
            <h4>啊哦~, 你访问的页面不存在了哟!</h4>
            <div class="reason">
                <p> 可能的原因:</p>
                <p>1. 你点击的链接已经过期了~</p>
                <p>2. 你输入的链接地址有误了吧</p>
            </div>
            <div class="back">
                <a href="首页.html">点下图片,有惊喜哦~</a>
                <a href="首页.html">快回到首页 > </a>
            </div>

        </div>
    </div>
</body>
</html>
<!--
     点击小鸟图片时，切换图片路径，
 -->
<script>
    var oCon=document.getElementById('con_404');
    var oImg=document.getElementsByTagName('img')[0];
    var oWord=document.getElementsByClassName('word')[0];
    var oA=document.getElementsByTagName('a');
    var oSpan=document.getElementsByTagName('span')[0];
    var time=10;
    clearInterval(iTimer);
    var iTimer=setInterval(function(){
        time--;
        if(time==0){
            window.location.href = "首页.html";
        }
        oSpan.innerHTML='还有'+ '<strong>' +time+'s'+ '</strong>' +'返回首页......';
    },1000)
      oImg.onclick=function(){
          clearInterval(iTimer);
         oImg.src='img/哼.gif';
         oWord.style.display='block';
         oA[0].innerHTML='嘿嘿,为什么要好奇!!';
      }
</script>